<template>
  <el-col :span="Number(colspan)">
    <el-form-item
      :prop="name"
      :label-width="labelWidth + 'px'"
      :label="label"
      :title="label"
      v-show="property.p.indexOf('H') === -1"
    >
      <el-checkbox-group
        :disabled="property.p.indexOf('D') >= 0"
        v-model="property.value"
        @change="onChange"
      >
        <span v-for="(item, index) in option" :key="index">
          <label role="checkbox">
            <span>{{ item.value }}</span>
            <el-checkbox :label="item.key"></el-checkbox>
          </label>
        </span>
      </el-checkbox-group>
    </el-form-item>
  </el-col>
</template>

<script type="es6">
export default {
  props: {
    colspan: {
      type: String,
      default: "24"
    },
    labelWidth: {
      type: String,
      default: "140"
    },
    label: {
      type: String,
      default: ""
    },
    codetype: {
      type: String,
      default: ""
    },
    property: {
      type: Object,
      default: function() {
        return {
          value: [],
          key: [],
          p: ""
        };
      }
    },
    name: {
      type: String,
      default: ""
    },
    datas: {
      type: Object,
      default: null
    },
    isChange: {
      type: Boolean,
      default: false
    },
    isClick: {
      type: Boolean,
      default: false
    },
    isBlur: {
      type: Boolean,
      default: false
    },
    isFocus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      option: []
    };
  },
  computed: {
    codeTypes() {
      return this.$store.getters.codeTypes;
    }
  },
  watch: {
    codeTypes: {
      handler(value) {
        this.selData(value[this.codetype]);
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    selData(value) {
      this.option = value;
    },
    /**
     * 点击事件
     */
    onClick() {
      if (!this.isClick) return;
      let obj = {
        path: this.$route.path + "/doQuery/" + this.name,
        params: {
          path: this.$route.path,
          ...this.datas
        }
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    },
    /**
     * 选择事件
     */
    onChange(value) {
      if (!this.isChange) return;
      let obj = {
        path: this.$route.path + "/doCheck/" + this.name,
        params: {
          path: this.$route.path,
          ...this.datas
        }
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    },
    /**
     * 失去焦点
     */
    onBlur() {
      if (!this.isBlur) return;
      let obj = {
        path: this.$route.path + "/blur/" + this.name,
        form: this.form
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    },
    /**
     * 获取焦点
     */
    onFocus() {
      if (!this.isFocus) return;
      let obj = {
        path: this.$route.path + "/focus/" + this.name,
        form: this.form
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    }
  }
};
</script>